@charset "UTF-8";
@import '../mixins/index.scss';

// justify-content, align-items
$flexJustify:
  (stretch, stretch, false), (start, flex-start, true), (end, flex-end, true), (center, center, true),
  ('between', space-between, true), (around, space-around, true), (initial, initial, false), (inherit, inherit, false),
  (unset, unset, false);

$flexContent:
  (stretch, stretch), (start, flex-start), (end, flex-end), (center, center), ('between', space-between),
  (around, space-around), (initial, initial), (inherit, inherit), (unset, unset);

$flexAligns:
  (stretch, stretch, true), (start, flex-start, true), (end, flex-end, true), (center, center, true),
  ('baseline', baseline, false), (initial, initial, false), (inherit, inherit, false);

$flexSelf:
  (auto, auto), (stretch, stretch), (center, center), (start, flex-start), (end, flex-end), (baseline, baseline),
  (initial, initial), (inherit, inherit);

// flex-direction
$directions: (row), (column), (row-reverse), (column-reverse);

// FlexStart

// ft-justify-*
@each $name, $value, $nvue in $flexJustify {
  .ft-justify-#{$name} {
    @if $nvue {
      @include justify-content($value);
    } @else {
      /* #ifndef APP-NVUE */
      @include justify-content($value);
      /* #endif */
    }
  }
}

// ft-align-*
@each $name, $value, $nvue in $flexAligns {
  .ft-align-#{$name} {
    @if $nvue {
      @include align-items($value);
    } @else {
      /* #ifndef APP-NVUE */
      @include align-items($value);
      /* #endif */
    }
  }
}

/* #ifndef APP-NVUE */
// ft-content-*
@each $name, $value in $flexContent {
  .ft-content-#{$name} {
    @include align-content($value);
  }
}

// ft-self-*
@each $name, $value in $flexSelf {
  .ft-self-#{$name} {
    @include align-self($value);
  }
}
/* #endif */

// ft-row, ft-column
@each $item in $directions {
  .ft-#{$item} {
    flex-direction: $item;
  }

  /* #ifndef APP-NVUE */
  .ft-#{$item} ::v-deep .uni-scroll-view .uni-scroll-view-content {
    display: flex;
    flex-direction: #{$item};
  }
  /* #endif */
}

// ft-wrap, ft-nowrap
.ft-wrap {
  @include flex-wrap(wrap);
}

//ft-nowrap
.ft-nowrap {
  @include flex-wrap(nowrap);
}

.ft-wrap-reverse {
  @include flex-wrap(wrap-reverse);
}

/* #ifndef APP-NVUE */
// ft-shrink
.ft-shrink-0 {
  flex-shrink: 0 !important;
}

.ft-basis-xs {
  flex-basis: 20%;
}

.ft-basis-sm {
  flex-basis: 40%;
}

.ft-basis-md,
.ft-basis-df {
  flex-basis: 50%;
}

.ft-basis-lg {
  flex-basis: 60%;
}

.ft-basis-xl {
  flex-basis: 80%;
}

/* #endif */

.ft-flex {
  @include display();
}

.ft-flex {
  // flex-row
  &-row {
    @extend .ft-flex;
    @extend .ft-row;
  }

  // flex-column
  &-column {
    @extend .ft-flex;
    @extend .ft-column;
  }

  // flex-warp
  &-wrap {
    @extend .ft-flex;
    @extend .ft-row;
    @include flex-wrap(wrap);
  }

  // flex-nowrap
  &-nowrap {
    @extend .ft-flex;
    @extend .ft-row;
    @include flex-wrap(nowrap);
  }

  &-auto {
    @extend .ft-flex;
    /* #ifndef APP-NVUE */
    @include flex(auto);
    /* #endif */
  }

  // ft-flex-1
  @for $i from 1 through 6 {
    &-#{$i} {
      flex: $i;
    }
  }

  // modifiers
  //ft-flex-center
  &--center {
    @extend .ft-flex;
    @extend .ft-justify-center;
    @extend .ft-align-center;
  }
}
